<template>
  <div>
    <div class="details-footer">
      <div class="details-discuss" @click="onComment">
        <i class="iconfont iconxiepinglun" style="margin-left: 10px"></i>
        <span>写评论...</span>
      </div>
      <i class="iconfont icon006pinglunhuifu">
        <sup class="detailCount">{{ total }}</sup>
      </i>
      <i class="iconfont iconfavorite" @click="shoucang"></i>
      <i class="iconfont iconzan" ref="active" @click="dianzan"></i>
      <i class="iconfont iconfenxiang"></i>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
import { getItem } from "../../utils/sessiton";
export default {
  props: ["item"],
  methods: {
    ...mapMutations("msbd", ["SET_DETAILCOMMENT"]),
    ...mapActions("discuss", ["setDianZan", "getDianz", "delteDianz"]),
    onComment() {
      this.SET_DETAILCOMMENT(true);
    },
    shoucang(){},
    async dianzan() {
      if (this.Dianz) {
        await this.delteDianz({ bdid: this.item, uids: getItem().id });
        this.$refs.active.className = "iconfont iconzan";
      } else {
        await this.setDianZan(this.item);
      }
      await this.getDianz({ bdid: this.item, uids: getItem().id });
      if (this.Dianz) {
        if (this.item == this.Dianz.bdid && getItem().id == this.Dianz.uids) {
          this.$refs.active.className = "active iconfont iconzan";
        }
      }
    },
  },
  async mounted() {
    await this.getDianz({ bdid: this.item, uids: getItem().id });
    if (this.Dianz) {
      if (this.item == this.Dianz.bdid && getItem().id == this.Dianz.uids) {
        this.$refs.active.className = "active iconfont iconzan";
      }
    }
  },
  computed: {
    ...mapState("discuss", ["total", "Dianz"]),
  },
};
</script>

<style scoped>
.details-footer {
  height: 60px;
  background-color: #eeeeee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100%;
  border-top: 1px solid #ccc;
}

.active {
  color: red;
}

.details-discuss {
  width: 135px;
  height: 35px;
  border-radius: 20px;
  border: 1px;
  background: #cccccc;
  line-height: 35px;
  display: flex;
  flex: 1;
  margin: 10px;
}

.icon-xie {
  font-size: 25px;
  margin-left: 10px;
}

.details-discuss > span {
  font-size: 16px;
  margin-left: 7px;
}

.details-footer > i {
  font-size: 25px;
  width: 45px;
  position: relative;
}

.detailCount {
  font-size: 8px;
  font-weight: 600;
  background: red;
  padding: 1px 4px;
  border-radius: 20px;
  color: #fff;
  position: absolute;
  right: 16px;
  top: -5px;
  text-align: center;
}
</style>